
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>分类管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-switch.css">
    <link rel="stylesheet" type="text/css" href="css/pager.css">

    <script src="lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="lib/bootstrap-switch.js"></script>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="../static/js/bootstrap-paginator.js"></script>
    <script src="js/pager.js"></script>
    <script>
        // verifi_login();
        function pager(total,size,name){
            var paras = {
                keyword:name,
                limit:size,
                limits:[5,10,15],
                groups:3,
                count:total
            }
            $("#pager2").YlpPage(paras);
        }
        function get_users_keyword(name,currentPage, pageSize){
            let datas;
            $.ajax({
                url:"/category/getOne",
                method:"GET",
                data:{
                    name,
                    currentPage:currentPage,
                    pageSize: pageSize

                },
                success:(data,status)=>{
                    datas = data;
                    render_data(data.records);
                    console.log(data.records);

                },
                error:()=>{
                    console.log("查询失败!");
                }
            })

        }
        //发送请求 请求商品数据

        function get_users(currentPage, pageSize){
            let datas;
            $.ajax({
                url:"/category/selectAll",
                method:"GET",
                async:false,
                data:{
                    currentPage,
                    pageSize
                },
                success:(data,status)=>{

                    datas = data;
                },
                error:()=>{
                    console.log("商品数据请求失败!")
                }
            })
            return datas;
        }

        //格式化时间
        function formatDateTime(dateTimeString) {
            const date = new Date(dateTimeString);
            const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
            const formattedTime = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
            return `${formattedDate} ${formattedTime}`;
        }

        //渲染用户数据到表格
        function render_data(categorys){
            //清除原本数据
            $("#category_list").empty();

            //遍历商品数据将数据渲染到页面中

            let i = 1;
            let categorys1=Array.from(categorys)
            categorys1.map((category) =>{
                let id=category.id;
                let name = category.name;
                let status=category.status;
                if (status === 1){
                    status="在售"
                }else if (status ===2){
                    status="下架"
                }else if (status === 3){
                    status="已删除"
                }
                let time = category.createTime;
                time=formatDateTime(time);

                $("#category_list").append("<tr><td>"+i+++"</td><td>"+id+"</td><td>"+name+"</td><td>"+status+"</td><td>"+time+"</td><td><button id=\"update-btn\" type=\"button\" class=\"btn btn-info\" data-toggle=\"modal\"  onclick='edit1(this)' data-target=\"#updDialog\">修改</button><button id=\"delete-btn\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" onclick='edit2(this)'data-target=\"#deleteDialog\">删除</button>")

            })
        }


        //自动填充修改模态框数据
        function edit1(val){
            //这里就是val，别以为写错了，如果写成this会报错：Uncaught SyntaxError: Unexpected token 'this'，这是转过来的参数值的意思
            let value = $(val).parent().parent().find("td");
            $("#c_id").val(value.eq(1).text())
            $("#upd_name").val(value.eq(2).text())
            // $("#select1").val(value.eq(3).value)
            if (value.eq(3).text()=="在售")
                $("select[name='s']").val(1);
            else if (value.eq(3).text()=="下架")
                $("select[name='s']").val(2);
            else if (value.eq(3).text()=="删除")
                $("select[name='s']").val(3);

        }

        //自动填充删除模态框数据
        function edit2(val){
            //这里就是val，别以为写错了，如果写成this会报错：Uncaught SyntaxError: Unexpected token 'this'，这是转过来的参数值的意思
            let value = $(val).parent().parent().find("td");
            $("#delete_cid").val(value.eq(1).text())
            $("#delete_cname").val(value.eq(2).text())
        }


        // 等待页面加载完成之后，向服务器请求所有用户数据
        $(function (){


            //初始化分页条
            let  data = get_users(1,5);
            //渲染用户数据到页面
            render_data(data.records);
            //获取数据的总数
            let total = data.total;
            let size= data.size;
            //初始化分页栏
            pager(total,size);

            //给筛选按钮绑定事件
            $("#queryBtn").click(() =>{
                let name = $("#username").val();
                console.log(name);
                $.ajax({
                    url:"/category/getOne",
                    method:"GET",
                    data:{
                        name
                    },
                    success:(data,status)=>{
                        document.getElementById("pager2_YlpPage").remove();
                        render_data(data.records);
                        //获取数据的总数
                        let total = data.total;
                        let size= data.size;
                        //初始化分页栏
                        pager(total,size,name);
                    },
                    error:()=>{
                        console.log("查询失败!");
                    }
                })

            })

            //给添加按钮绑定事件
            $("#addBtn").click(()=>{
                let name = $("#cname").val();
                let status =$("#select").val();
                console.log(name);
                console.log(status);
                // console.log(status);
                if(!(name && status)){
                    $("#msg").text("请将信息输入完整!").css("color", "red").show();
                    return;
                }
                $("#msg").hide();

                let formData = new FormData();
                formData.append("name",name);
                formData.append("status",status);
                $.ajax({
                    url:"/category/add",
                    type:"POST",
                    processData: false,
                    contentType: false,
                    data:formData,
                    success: (data) => {
                        if (data.isOk) {
                            $("#msg").text("商品类别添加成功！").css("color", "yellowgreen").show();
                        }
                        $("#msg").text(data.msg).css("color", "yellowgreen").show();
                    },
                    error: () => {
                        $("#msg").text("添加商品类别请求发送失败！").css("color", "red").show();
                    }
                })
            })

            //给修改确定按钮绑定事件
            $("#upd_addBtn").click(() =>{
                let id=$("#c_id").val();
                let name = $("#upd_name").val();
                let status = $("select[name='s']").val();
                console.log(id);
                console.log(status),

                $.ajax({
                    url:"/category/update",
                    type:"POST",
                    data: {
                        id,
                        name,
                        status
                    },
                    success:(data,status)=>{
                        if (data.code==="100"){
                            // console.log(data.code);
                            $("#msg2").text("商品类别信息修改成功!").css("color", "yellowgreen").show();
                            return;
                        }
                        else if (data.code==="200"){
                            $("#msg1").text("商品类别不存在或存在异常").css("color", "red").show();

                        }
                    },
                    error:()=>{
                        console.log("修改失败!");
                    }
                })

            })
            //给删除确定按钮绑定事件
            $("#delete_Btn").click(()=>{
                let id=$("#delete_cid").val();
                let name=$("#delete_cname").val();
                console.log(id);
                $.ajax({
                    url:"/category/delete",
                    method:"GET",
                    data:{
                        id,
                        name
                    },
                    success:(data,status)=>{
                        if (data.code==="210"){
                            // console.log(data.code);
                            $("#msg1").text("该商品类别下存在商品,无法删除!!!").css("color", "red").show();
                            return;
                        }
                        else if (data.code==="200"){
                            $("#msg1").text("删除的信息存在异常!!!").css("color", "red").show();
                            return;
                        }


                        else if (data.code==="100"){
                            $("#msg1").text("删除成功").css("color", "yellowgreen").show();

                        }
                    },
                    error:()=>{
                        console.log("删除失败!");
                    }
                })

            })


        })
    </script>

</head>
<body>
<!--the top nav begin-->
<div class="navbar navbar-default" role="navigation">
    <div class="navbar-inner">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">茶韵商城后台系统</a>
        </div>
        <ul class="nav navbar-nav pull-right">
            <li id="fat-menu" class="dropdown">
                <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-user"></span> 用户名
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="updateadmin.html">我的账户</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="login.html">登出</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--the top nav end-->
<!--the sidebar nav begin -->
<div class="sidebar-nav">
    <a href="index.html" class="nav-header" ><span class="glyphicon glyphicon-home"></span> 管理中心 首页</a>

    <a href="category.html" class="nav-header"><span class="glyphicon glyphicon-hd-video"></span> 分类管理</a>

    <a href="product.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 商品管理 </a>

    <a href="order.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 订单管理 </a>

    <a href="userlist.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 账户管理</a>

    <a id="outLink" href="login.html" class="nav-header" ><span class="glyphicon glyphicon-log-out"></span> 登出</a>
</div>
<!--the siderbar nav en-->

<div class="content">
    <div class="header">
        <!--page title begin-->

        <!--提示框-->
        <div id="ok" class="alert alert-success" style="position: fixed; z-index: 99; width: 80%; display: none;">
            操作成功！
        </div>
        <div id="error" class="alert alert-danger" style="position: fixed; z-index: 99; width: 80%; display: none;">
            操作错误！
        </div>
    </div>



    <div class="toolbar">
        <div class="row">
            <div class="col-xs-6">
                <form class="form-inline pull-right" id="device-search" role="form">
                    <div class="form-group">商品类别:</div>
                    <div class="form-group">
                        <input id="username" type="text" class="form-control" placeholder="商品类名……">
                    </div>
                    <button id="queryBtn" type="button" class="btn btn-default">筛选</button>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addCategoryDialog" id="addcategory">新增类别
                    </button>
                </form>
            </div>
        </div>
    </div>





    <!--all user detail begin -->
    <div class="panel panel-default" id="all-device-detail">
        <div class="panel-heading">
            <h5>所有分类信息</h5>

        </div>
        <table class="table">
            <thead>
            <tr>
                <th>序号</th>
                <th>类别编号</th>
                <th>分类名称</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="category_list">
            </tbody>


        </table>
    </div>

    <!--分页控件-->

    <div style="margin: 40px 0;text-align: center">
        <div id="pager2"> </div>
    </div>

</div>
<!--the container end -->


<div class="modal fade" id="addCategoryDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel1">创建分类</h4>
            </div>
            <div class="modal-body row">
                <form action="#" class="form-horizontal" id="add-user1" role="form" method="post">

                    <div class="form-group">
                        <label for="cname" class="col-xs-4 control-label">分类名称</label>
                        <div class="col-xs-6">
                            <input type="text" class="form-control" id="cname">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="select" class="col-xs-4 control-label">状态</label>

                        <div class="col-xs-6">
                            <select class="form-control" id="select">
                                <option value="1">在售</option>
                                <option value="2">下架</option>
                                <option value="3">删除</option>
                            </select>
                        </div>
                    </div>

                </form>
                <div id="msg" style="text-align: center;color:red;display: none;">请将数据填写完整！</div>
            </div>
            <div class="modal-footer">
                <button id="closeBtn" type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload()">关闭</button>
                <button id="addBtn" type="button" class="btn btn-primary">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- 修改 -->
<div class="modal fade" id="updDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">修改分类</h4>
            </div>
            <div class="modal-body row">
                <form action="#" class="form-horizontal" id="add-user" role="form" method="post">

                    <div class="form-group">
                        <label for="c_id" class="col-xs-4 control-label">类别编号</label>
                        <div class="col-xs-6">
                            <input type="text" class="form-control" id="c_id" disabled="disabled">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="upd_name" class="col-xs-4 control-label">分类名称</label>
                        <div class="col-xs-6">
                            <input type="hidden" id="upd_id"/>
                            <input type="text" class="form-control" id="upd_name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="select1" class="col-xs-4 control-label">状态</label>

                        <div class="col-xs-6">
                            <select class="form-control" id="select1" name="s">
                                <option value="1">在售</option>
                                <option value="2">下架</option>
                                <option value="3">删除</option>
                            </select>
                        </div>
                    </div>
                    <div id="msg2" style="text-align: center;color: red"></div>
                </form>

            </div>
            <div class="modal-footer">
                <button id="upd_closeBtn" type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload()">关闭</button>
                <button id="upd_addBtn" type="button" class="btn btn-primary">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<!--删除-->
<div class="modal fade" id="deleteDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel2">删除分类</h4>
            </div>
            <div class="modal-body row">
                <form action="#" class="form-horizontal" id="delete_category" role="form" method="post">

                    <div class="form-group">
                        <label for="delete_cid" class="col-xs-4 control-label">类别编号</label>
                        <div class="col-xs-6">
                            <input type="text" class="form-control" id="delete_cid" disabled="disabled">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="delete_cname" class="col-xs-4 control-label">类别名称</label>
                        <div class="col-xs-6">
                            <input type="text" class="form-control" id="delete_cname" disabled="disabled">
                        </div>
                    </div>
                    <div id="msg1" style="text-align: center;color: red"></div>

                </form>
            </div>
            <div class="modal-footer">
                <button id="delete_closeBtn" type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload()">关闭</button>
                <button id="delete_Btn" type="button" class="btn btn-primary">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

</div>
<!--the content end -->
<script src="lib/bootstrap/js/bootstrap.js"></script>

<!--全选按钮实现-->
<script>

    $(function () {
        $("#all").click(function () {
            var checked_status = this.checked;
            $("input[name=device-permission]").each(function () {
                this.checked = checked_status;
            });
        });
    });
</script>
</body>
</html>
